<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	* {margin:0;padding:0;}
	body {background:#666;}
	ul,li {list-style:none;}
	.box {width:630px;overflow:hidden;margin:20px auto 20px;}
	.box li {float:left;margin-right:5px;width:100px;text-align:center;height:20px;line-height:20px;background:#C60;border-radius:5px;cursor:pointer;}
	.box li.bg {background:#960;color:#fff;}
	.c {display:none;height:300px;border:1px solid #ccc;background:#fff;}
</style>
<script>
/*
**  author:himi
**  date:2012-12-09 22:47  
**	remark:选项卡容器class名为box，选项卡下的内容class名为c，选项卡菜单为ul、li结构，菜单与内容个数需对应
*/

	//使用class获取元素
	function getElementsByClassName(elem_name,elem_tags) {
		if(elem_tags == null) {
			elem_tags = '*';	
		}
		var all_elem = document.getElementsByTagName(elem_tags);
		var arr = [];										   		
		for(var i=0; i<all_elem.length; i++) {                 
			if(all_elem[i].className == elem_name) {
				arr.push(all_elem[i]);
			}	
		}	
		return arr;	      									  
	}
	
	//使用class获取指定元素下的子元素
	function getElementsByClassNameForChilds(parent_tag_name,childs_class_name) {
		var childs = parent_tag_name.childNodes;
		var arr = [];										   		
		for(var i=0; i<childs.length; i++) {                 
			if(childs[i].className == childs_class_name) {
				arr.push(childs[i]);
			}	
		}	
		return arr;	      									  
	}
	
	//tabs for all pages
	function tabs() {
		var box = getElementsByClassName('box','div');                 //获取所有选项卡
		for(var i in box) {                                            //循环所有选项卡
			(function(i){                                              //使用闭包判断当前选项卡处于第几个
				var lis = box[i].getElementsByTagName('li');           
				var cs = getElementsByClassNameForChilds(box[i],'c');
				lis[0].className = 'bg';        //默认第一个菜单为选中状态
				cs[0].style.display = 'block';  //默认第一个内容显示
				for(var j in lis) {   //循环当前选项卡的菜单                                 	
					(function(j){     //判断当前菜单处于第几个                                
						lis[j].onmouseover = function() { 
							this.className = 'bg';             
							for(var n in cs) {  //循环当前选项卡的内容
								if(n == j) {    //匹配菜单和内容
									if(lis[n].className == 'bg') {  //在菜单和内容的索引相同的情况下判断当前菜单的选中状态
										cs[n].style.display = 'block';	//若选中,则设置相同索引的内容的显示
									}
								}else {  //菜单和内容不匹配
									cs[n].style.display = 'none';  //隐藏内容
									lis[n].className = '';	       //删除菜单选中状态
								}                         
							}		
						}
					})(j);	
				}
			})(i);	
		}
	}
	window.onload = tabs;
</script>
</head>

<body>
	<div class="box">
    	<ul>
            <li>美女</li>
            <li>帅哥</li>
            <li>结婚</li>
        </ul>
        <p style="clear:both;"></p>
        <div class="c">我是美女。</div>
        <div class="c">我是帅哥。</div>
        <div class="c">我们结婚了。</div>
    </div>
    
    <div class="box">
    	<ul>
            <li>女神</li>
            <li>屌丝</li>
            <li>逆袭</li>
        </ul>
        <p style="clear:both;"></p>
        <div class="c">我是他们的女神。</div>
        <div class="c">我是那个默默的屌丝。</div>
        <div class="c">屌丝逆袭了女神</div>
    </div>
</body>
</html>
